<template>
  <el-container>
  <el-header height="170px" style="padding:0 0;background-color:#fff">
  

   <HomeNavigation></HomeNavigation>
   <SearchBox></SearchBox>
  

        <!-- 首页分类 -->
        <ClassNavigation></ClassNavigation>
     
   
  


  </el-header>
  <el-main  style="background-image:url('http://datong.crmeb.net/public/uploads/attach/2019/03/29/5c9e015bdc6f5.jpg') ;background-repeat:no-repeat; background-size: 100% 100%;height:600px">
    <div class="main acea-row row-right">
      <div class="g-bd" v-if="formItem === 1">
        <div class="headerWarp  acea-row " >
         <div class="g-left" :class="current === index ? 'on' : ''" v-for="(item, index) in navList" :key="index" @click="navTap(index)"> <p>{{item}}</p></div>
        </div>
        <div class="g-form1"  :hidden="current !== 0">
          <el-form >
            <el-form-item  prop="pass" >
              <el-input type="text"   v-model="account"  placeholder="请输入手机号" prefix-icon="el-icon-phone"  autocomplete="off" required></el-input>
            </el-form-item>
            <el-form-item  prop="pass" >
              <el-input type="password"     v-model="password"   show-password   placeholder="请输入密码" prefix-icon="el-icon-lock"  autocomplete="off" required></el-input>
            </el-form-item>
            <div  class="forget acea-row row-right" @click="$router.push({ name: 'RetrievePassword' })">      
                <p class="iconfont icon-wenti">忘记密码</p>
            </div>
            <el-form-item >
              <el-button type="primary" @click="submit" style="width:100%;"><p class="submitForm" >登录</p></el-button>
            </el-form-item>
            <el-form-item>
              <el-checkbox checked="true" text-color="#fff">我同意《服务条款》和《隐私政策》</el-checkbox>
            </el-form-item>
            <div class="tip acea-row row-center-wrapper">
              <p>没有账号?</p>
              <div @click="formItem = 2" style="color:red">立即注册</div>
            </div>
          </el-form>
        </div>
        <div class="g-form2" :hidden="current !== 1">
          <el-form >
            <el-form-item  prop="pass" >
              <el-input type="text"   v-model="account"  placeholder="请输入手机号" prefix-icon="el-icon-phone"  autocomplete="off" required></el-input>
            </el-form-item>
            
            <el-form-item >
              <el-input placeholder="请输入短信验证码" v-model="captcha">
              <el-button slot="append"  @click="code">获取验证码</el-button>
              </el-input>
            </el-form-item>
            <el-form-item >
              <el-button type="primary"  @click="loginMobile" style="width:100%;"><p class="submitForm" >手机快捷登录</p></el-button>
            </el-form-item>
            <el-form-item>
              <el-checkbox checked="true" text-color="#fff">我同意《服务条款》和《隐私政策》</el-checkbox>
            </el-form-item>
            <div class="tip acea-row row-center-wrapper">
              <p>没有账号?</p>
              <div @click="formItem = 2" style="color:red">立即注册</div>
            </div>
          </el-form>
        </div>
        <div class="g-foot"></div>
      </div>
      <div class="g-bd2" v-else>
        <div class="headerWarp" >
            <p>注册账号</p>
          </div>
        <div class="g-form">
          <el-form >
            <el-form-item  prop="pass" >
              <el-input type="text"   v-model="account"  placeholder="请输入手机号" prefix-icon="el-icon-phone"  autocomplete="off" required></el-input>
            </el-form-item>
            
            <el-form-item >
              <el-input placeholder="请输入短信验证码" v-model="captcha">
              <el-button slot="append"  @click="code">获取验证码</el-button>
              </el-input>
            </el-form-item>
            <el-form-item  prop="pass" >
              <el-input type="password"     v-model="password"   show-password   placeholder="填写您的登录密码" prefix-icon="el-icon-lock"  autocomplete="off" required></el-input>
            </el-form-item>
            <el-form-item >
              <el-button type="primary"  @click="register" style="width:100%;"><p class="submitForm" >立即注册</p></el-button>
            </el-form-item>
            <el-form-item>
              <el-checkbox checked="true" text-color="#fff">我同意《服务条款》和《隐私政策》</el-checkbox>
            </el-form-item>
            <div class="tip acea-row row-center-wrapper">
              <p>已有账号?</p>
              <div @click="formItem = 1" style="color:red">立即登录</div>
            </div>
          </el-form>
        
        </div>
        <div class="g-foot"></div>
      </div>
    </div>
  </el-main>
  <el-footer  style="padding:0">
    <Foot></Foot>
  </el-footer>
  </el-container>

</template>
<script>
import sendVerifyCode from "@mixins/SendVerifyCode";
import { login, loginMobile, registerVerify, register } from "@api/user";
import attrs, { required, alpha_num, chs_phone } from "@utils/validate";
import { validatorDefaultCatch } from "@utils/dialog";
import { getLogo } from "@api/public";
import dayjs from "dayjs";
import cookie from "@utils/store/cookie";
import { imageBase64, getHomeData } from "@api/public";
import { swiper,swiperSlide } from "vue-awesome-swiper";
import HomeNavigation from "@components/HomeNavigation";
import SearchBox from "@components/SearchBox";
import ClassNavigation from "@components/ClassNavigation";
import Foot from "@components/Foot";

const BACK_URL = "login_back_url";

export default {
  name: "Login",
  mixins: [sendVerifyCode],
  components:{
    HomeNavigation,
    SearchBox,
    ClassNavigation,
    Foot
  },
  data: function() {
    return {
      navList: ["账号登录", "手机号登录"],
      current: 1,
      account: "",
      password: "",
      captcha: "",
      formItem: 1,
      type: "login",
      logoUrl: "",
       swiperRoll: {
        direction: "vertical",
        autoplay: {
          disableOnInteraction: false,
          delay: 2000
        },
        loop: true,
        speed: 1000,
        observer: true,
        observeParents: true
      },
      roll: [],
      info: {
        fastList: [],
        bastBanner: [],
        firstList: [],
        bastList: []
      },
    };
  },
  mounted: function() {
    let that = this;
    this.getLogoImage();
    getHomeData().then(res => {
      that.$set(that, "roll", res.data.roll);
      that.logoUrl = res.data.logoUrl;
      that.$set(that, "info", res.data.info);
    });
  },
  methods: {
    async getLogoImage() {
      let that = this;
      getLogo(2).then(res => {
        that.logoUrl = res.data.logo_url;
      });
    },
     submit() {
      this.followCode = true;
      this.followHid = false;
    },
    async loginMobile() {
      var that = this;
      const { account, captcha } = that;
      try {
        await that
          .$validator({
            account: [
              required(required.message("手机号码")),
              chs_phone(chs_phone.message())
            ],
            captcha: [
              required(required.message("验证码")),
              alpha_num(alpha_num.message("验证码"))
            ]
          })
          .validate({ account, captcha });
      } catch (e) {
        return validatorDefaultCatch(e);
      }
      loginMobile({
        phone: that.account,
        captcha: that.captcha,
        spread: cookie.get("spread")
      })
        .then(res => {
          let data = res.data;
          let newTime = Math.round(new Date() / 1000);
          that.$store.commit(
            "LOGIN",
            data.token,
            dayjs(data.expires_time) - newTime
          );
          const backUrl = cookie.get(BACK_URL) || "/";
          cookie.remove(BACK_URL);
          that.$router.replace({ path: backUrl });
        })
        .catch(res => {
          that.$dialog.error(res.msg);
        });
    },
    async register() {
      var that = this;
      const { account, captcha, password } = that;
      try {
        await that
          .$validator({
            account: [
              required(required.message("手机号码")),
              chs_phone(chs_phone.message())
            ],
            captcha: [
              required(required.message("验证码")),
              alpha_num(alpha_num.message("验证码"))
            ],
            password: [
              required(required.message("密码")),
              attrs.range([6, 16], attrs.range.message("密码")),
              alpha_num(alpha_num.message("密码"))
            ]
          })
          .validate({ account, captcha, password });
      } catch (e) {
        return validatorDefaultCatch(e);
      }
      register({
        account: that.account,
        captcha: that.captcha,
        password: that.password,
        spread: cookie.get("spread")
      })
        .then(res => {
          that.$dialog.success(res.msg);
          that.formItem = 1;
        })
        .catch(res => {
          that.$dialog.error(res.msg);
        });
    },
    async code() {
      var that = this;
      const { account } = that;
      try {
        await that
          .$validator({
            account: [
              required(required.message("手机号码")),
              chs_phone(chs_phone.message())
            ]
          })
          .validate({ account });
      } catch (e) {
        return validatorDefaultCatch(e);
      }
      if (that.formItem == 2) that.type = "register";
      await registerVerify({ phone: that.account, type: that.type })
        .then(res => {
          that.$dialog.success(res.msg);
          that.sendCode();
        })
        .catch(res => {
          that.$dialog.error(res.msg);
        });
    },
    navTap: function(index) {
      this.current = index;
    },
    async submit() {
      const { account, password } = this;
      try {
        await this.$validator({
          account: [
            required(required.message("账号")),
            attrs.range([5, 16], attrs.range.message("账号")),
            alpha_num(alpha_num.message("账号"))
          ],
          password: [
            required(required.message("密码")),
            attrs.range([6, 16], attrs.range.message("密码")),
            alpha_num(alpha_num.message("密码"))
          ]
        }).validate({ account, password });
      } catch (e) {
        return validatorDefaultCatch(e);
      }

      login({ account, password })
        .then(({ data }) => {
          this.$store.commit("LOGIN", data.token, dayjs(data.expires_time));
          const backUrl = cookie.get(BACK_URL) || "/";
          cookie.remove(BACK_URL);
          this.$router.replace({ path: backUrl });
        })
        .catch(e => {
          this.$dialog.error(e.msg);
        });
    }
  }
};
</script>

<style scoped>
.main {
  width: 1090px;
  height: 560px;
  margin: 0 auto;
 
}

.main .g-bd2 .headerWarp  {
 width: 153px;
font-size: 18px;
 text-align: center;
 line-height: 60px;
  color: #000;
  padding-top: 10px;
  margin: 0 auto;
}
.main .g-bd2  .g-foot {
  width: 384px;
  height: 40px;
  background-color:#F5F3EF;
  margin-top: 21px;
}


.main .g-bd2  .g-form .f-user {
  width:32px;
  height:32px;
  line-height: 32px;
  text-align: center;
}

.main .g-bd2  .g-form  .submitForm {
  margin:0 ;
  font-size: 16px;
  line-height: 26px;
  
}

.main .g-bd2  .g-form .forget {
  margin-bottom: 20px;
  color: #ccc;
  font-size: 14px;
  cursor: pointer;
}
.main .g-bd2  .g-form  .tip  {
  font-size: 14px;
  color: #999;
}

.main .g-bd2  .g-form {
  width: 300px;
  height: 285px;
  margin: 10px auto;
}

.main .g-bd2 {
  width: 384px;
  height: 405px;
  background-color: #fff;
  margin-top: 60px;
}

.main .g-bd {
  width: 384px;
  height: 365px;
  background-color: #fff;
  margin-top: 60px;
}
.main .g-bd  .g-foot {
  width: 384px;
  height: 40px;
  background-color:#F5F3EF;
  margin-top: 21px;
}
.main .g-bd  .g-form1  .f-user {
  width:32px;
  height:32px;
  line-height: 32px;
  text-align: center;
}

.main .g-bd  .g-form1  .submitForm {
  margin:0 ;
  font-size: 16px;
  line-height: 26px;
  
}

.main .g-bd  .g-form1 .forget {
  margin-bottom: 20px;
  color: #ccc;
  font-size: 14px;
  cursor: pointer;
}
.main .g-bd  .g-form1  .tip  {
  font-size: 14px;
  color: #999;
}
.main .g-bd  .g-form1 {
  width: 300px;
  height: 270px;
  margin: 10px auto;
}

.main .g-bd  .g-form2  .f-user {
  width:32px;
  height:32px;
  line-height: 32px;
  text-align: center;
}

.main .g-bd  .g-form2  .submitForm {
  margin:0 ;
  font-size: 16px;
  line-height: 26px;
  
}

.main .g-bd  .g-form2 .forget {
  margin-bottom: 20px;
  color: #ccc;
  font-size: 14px;
  cursor: pointer;
}
.main .g-bd  .g-form2  .tip  {
  font-size: 14px;
  color: #999;
}
.main .g-bd  .g-form2 {
  width: 300px;
  height: 235px;
  margin: 10px auto;
}

.main .g-bd .headerWarp {
  width: 306px;
  height: 60px;
  font-size: 18px;
  line-height: 18px;
  margin: 0 auto  ;

}
.main .g-bd .headerWarp .g-left {
 width: 153px;
 text-align: center;
 line-height: 60px;
  color: #999;
  padding-top: 10px;
  cursor: pointer;
}
.main .g-bd .headerWarp .g-left.on p{
   color: #000;
}

.main .g-bd .headerWarp .g-left:hover {
  color: #cc9756;
}
.main .g-bd .headerWarp .g-center,.g-right {
   padding: 30px 0 10px;
   margin-left: 55px;
   color: #999;
}


.classify {
  margin: 0 auto;
  width: 1090px;
  height: 25px;
}

.classify ul {
  height: 25px;
  position: relative;
}

.classify ul li {
  display: inline-block;
}
.classify ul li span {
  font-size: 14px;
  font-family: "Microsoft Yahei", "微软雅黑", verdana;
  line-height: 25px;
  font-weight: 700;
  margin: 0 26px;
  padding-bottom: 3px;
}

.classify ul li .title {
  height: 25px;
}
.classify ul li span:hover {
  border-bottom: 4px solid #cc9756;
  color: #cc9756;
}

.classify ul li .item {
  padding: 0 26px;
  padding-bottom: 7px;
}
.show-warp {
  display: none;
  position: absolute;
  left: 0px;
  top: 35px;
  width: 1090px;
  height: 180px;
  background-color: #d4282d;
  z-index: 99999999;
}
.classify .item:hover .show-warp {
  display: block;
}


.footer {
  background-color: #414141;
}
.footer .text{
  width: 1090px;
  height: 100px;
  margin: 15px  auto;

}
.footer .text .line1{
margin-top:30px ;
 text-align: center;
 line-height: 1.5;
 font-family: "Microsoft Yahei","微软雅黑",verdana;
 color: #999;
}
.footer .text .line2{
margin-top:10px ;
 text-align: center;
 line-height: 1.5;
 font-family: "Microsoft Yahei","微软雅黑",verdana;
 color: #999;
}
</style>